<template>
	<view>
		<view class="head">
			<view class="head-item" v-for="(item,index) in headItems" :key="index" hover-class="com-hover-btn"
			 @tap="deRoute(item)">
				<view class="uni-grid-9-ico">
					<label class="iconfont icon-label-lin" :class="item.F_Icon"></label>
				</view>
				<text class="uni-grid-9-text">{{item.F_FullName}}</text>
			</view>
		</view>
		
		<view class="uni-grid-9">
			<view class="uni-grid-9-item" v-for="(item,index) in items" :key="index" hover-class="com-hover-icon"
			 @tap="deRoute(item)">
				<view class="uni-grid-9-ico">
					<label class="iconfont icon-label-lin" :class="item.F_Icon"></label>
				</view>
				<text class="uni-grid-9-text">{{item.F_FullName}}</text>
			</view>
			<view class="uni-grid-9-item last-item" v-if="number===2"></view>
		</view>
		<view class="noContent" v-if="isData">
			<img :src="nodata" alt="">
			<view class="">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/js/config.js'
	import helper from '@/common/js/helper.js'
	export default {
		data() {
			return {
				headItems: [],
				items: [],
				comList:[],
				depList:[],
				postList:[],
				userList:[],
				dicList:[],
				nodata: config.Resources.message.nodata,
				isData: false,
				number:0
			}
		},
		onLoad() {
			this.select();
			try {
				const applyMenu = uni.getStorageSync(config.Global.cache + '_ApplyMenu');
				if(applyMenu == ''){
					// console.log('ok')
					this.isData = true
					return;
				}
				this.isData = false
				let newApplyMenu = []
				for(var i = 0; i < applyMenu.length; i++){
					if(i < 2){
						this.headItems.push({
							F_Id: applyMenu[i].id,
							F_Icon: applyMenu[i].icon,
							F_FullName: applyMenu[i].fullName,
							F_UrlAddress: applyMenu[i].urlAddress
						});
					}else{
					this.items.push({
							F_Id: applyMenu[i].id,
							F_Icon: applyMenu[i].icon,
							F_FullName: applyMenu[i].fullName,
							F_UrlAddress: applyMenu[i].urlAddress
						});
					}
				}
				
				/* 过滤自定义表单 */
				// for (var i = 0; i < applyMenu.length; i++) {
				// 	if(applyMenu[i].enCode == "fieldpunchcard" || applyMenu[i].enCode == "ordermanagelist" || applyMenu[i].enCode == "schedulemine" || applyMenu[i].enCode == "staffmanagelist" || applyMenu[i].enCode == "facerecognition" || applyMenu[i].enCode == "reportinglog"){
				// 		newApplyMenu.push(applyMenu[i])
				// 	}
				// }
				// for(let j = 0;j<newApplyMenu.length;j++){
				// 	if (j < 2) {
				// 		this.headItems.push({
				// 			F_Id: newApplyMenu[j].id,
				// 			F_Icon: newApplyMenu[j].icon,
				// 			F_FullName: newApplyMenu[j].fullName,
				// 			F_UrlAddress: newApplyMenu[j].urlAddress
				// 		});
				// 	} else {
				// 		this.items.push({
				// 			F_Id: newApplyMenu[j].id,
				// 			F_Icon: newApplyMenu[j].icon,
				// 			F_FullName: newApplyMenu[j].fullName,
				// 			F_UrlAddress: newApplyMenu[j].urlAddress
				// 		});
				// 	}
				// }
				this.number=this.items.length%3
			} catch (e) {
				// console.log(e)
				//TODO handle the exception
			}
		},
		
		methods: {
			select(){
				this.comSelect();
				this.depSelect();
				this.postSelect();
				this.userSelect();
				this.dicSelect();
			},
			
			/* 公司下拉数据 */
			async comSelect(){
				const res = await helper.ajaxPromise({
					url: 'api/system/Permission/Organize/Selector',
				})
				
				let treedata = res.data.data.list;
				this.comList = treedata;
				uni.setStorageSync('comList',this.comList )
			},
			
			/* 部门下拉数据 */
			async depSelect(){
				const res = await helper.ajaxPromise({
					url: 'api/system/Permission/Organize/Department/Selector',
				})
				
				let treedata = res.data.data.list;
				this.depList = treedata;
				uni.setStorageSync('depList',this.depList )
			},
			
			/* 岗位下拉数据 */
			async postSelect(){ 
				const res = await helper.ajaxPromise({
					url: 'api/system/Permission/Position/Selector',
				})
				
				let treedata = res.data.data.list;
				this.postList = treedata;
				uni.setStorageSync('postList',this.postList)
			},
			
			/* 用户下拉数据 */
			async userSelect(){
				const res = await helper.ajaxPromise({
					url: 'api/system/Permission/Users/Selector',
				})
				
				let treedata = res.data.data.list;
				this.userList = treedata;
				uni.setStorageSync('userList',this.userList)
			},
			
			/* 数据字典 */
			async dicSelect(){
				const res = await helper.ajaxPromise({
					url: '/api/system/Base/DictionaryType',
				})
				
				let treedata = res.data.data.list;
				this.dicList = treedata;
				uni.setStorageSync('dicList',this.dicList)
			},
			
			
			
			
			/* 点击跳转 */
			deRoute(e) {
				uni.setStorage({
					key:"title",
					data:e
				})
				// uni.showLoading({
				// 	title:'正在处理',
				// 	mask:true,
				// })
				setTimeout(function () {
					uni.navigateTo({
						url:e.F_UrlAddress,
						success: function(res) {
						   
						},
						fail: (err) => {
							helper.msg("暂无此页面")
						}
						
					})
					uni.hideLoading();
					/* 清除汇报页缓存 */
					uni.removeStorageSync('TabCur3')
				}, 300);
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}

	.uni-grid-9 {
		/* margin-top: 28rpx; */
		background-color: #f0f2f6;
		justify-content: space-between;
		padding: 0 20upx;
		box-sizing: border-box;
	}

	.uni-grid-9-item {
		/* width: 28%; */
		margin: 0 0 30rpx 0;
		/* padding: 20rpx 0; */
		box-shadow: 0 1px 4px #F9F9F9, 1px 1px 40px rgba(0, 0, 0, 0.06);
		position: relative;
		border-radius: 8rpx;
		background-color: #fff;
		width: 220upx;
		height: 160upx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		&.last-item{
			background-color: transparent;
			box-shadow: none;
		}
	}

	.uni-grid-9-text {
		margin-top: 0upx;
		font-size: 24upx;
	}

	.uni-grid-9-ico {
		margin-top: 0upx;
		background: 0;
		color: #3281ff;
	}

	.icon-label-lin {
		/* background: linear-gradient(to left, #339AFF, #33BBFF);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent; */
		font-size: 80upx;
		line-height: 1;
		color: #3281ff;
	}

	.head {
		display: flex;
		justify-content: space-between;
		padding: 0 20upx;
		align-items: center;
		margin-bottom: 30upx;
		margin-top: 30upx;

		.head-item {
			width: 345upx;
			height: 180upx;
			background-color: #3281ff;
			border-radius: 10upx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.uni-grid-9-ico .icon-label-lin {
				color: #fff;
			}

			.uni-grid-9-text {
				color: #fff;
			}
		}
	}
</style>
